<template>
  <view>
    <up-row
      type="flex"
      align="center"
      class="tag-default"
      :style="{'border-color': color, color: color}"
    >
      <view>
        <uni-icons
          custom-prefix="iconfont"
          :type="iconName"
          size="18"
          :color="color"
        ></uni-icons>
      </view>
      <view class="u-m-l-5">{{ name }}</view>
    </up-row>
  </view>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  name: {
    type: String
  },
  iconName: {
    type: String
  },
  color: {
    type: String,
    default: '#555'
  }
})
</script>

<style lang="scss" scoped>
.tag-default+.tag-default {
  margin-left: 0px;
}
.tag-default {
  border: 1px solid #bababa;
  padding: 8rpx 12rpx;
  border-radius: 10rpx;
  color: $u-content-color;
  font-size: 14px;
  margin: 0 5px;
  line-height: 1;
}
</style>